<template>
  <div class="login-page">
    <div class="login-form">
      <!-- <div></div> -->
      <div class="login-form-item">
        <el-input
          prefix-icon="el-icon-user"
          placeholder="请输入账号"
          v-model.trim="user.account"
          :clearable="true"
        ></el-input>
      </div>
      <div class="login-form-item">
         <el-input
           prefix-icon="el-icon-unlock"
           placeholder="请输入密码"
           v-model.trim="user.password"
           type="password"
           clearable
           show-password
          ></el-input>
      </div>
        <div class="login-form-item">
            <el-button type="primary" :loading="loading" @click="handleLogin" style="margin-right:60px"
           >登录</el-button>
		    <el-button type="primary" :loading="loading" @click="handleregister"
           >注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        account: "",
        password: "",
      },

      loading: false,
    };
  },
  methods: {
     handleLogin() {
      // 验证账号密码是否为空
      //在验证账号密码是否正确
      // 在本地会话保存信息
      // 跳转到首页
      if (this.user.account == "") {
        this.$notify.error({
          title: "提示",
          message: "账号不可以为空",
          // position:'top-left'
        });
        return;
      }
      if (this.user.password == "") {
        this.$notify.error({
          title: "提示",
          message: "密码不可以为空",
        });
        return;
      }
	  else{
		  this.axios
        .post(`/user/login`, this.user)
        .then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: "登陆成功",
              type: "success",
			  $router:push("/menu")
            });
          } else {
            this.$notify.error({title: "提示",message: "账号或密码错误"});
            this.$router.push("/login")
          }
        })
        // .catch((error) => {
        //    this.$message.error('登录错误',error);
		//    return;
        // });
	  }
      
      /*      if (this.user.username != "admin" || this.user.password != "123456") {
        this.$notify.error({
          title: "提示",
          message: "账号或密码错误",
        });
        return;
      } */
      this.loading = true;
     //   //模拟一个2秒的延迟，让下面的代码等待2秒
     //   await new Promise((resolve) => {
     //     setTimeout(() => {
     //       resolve();
     //     }, 2000);
     //   });
      this.loading = false;
      //如果所有验证都通过的话我们就
      //在本地保存一个用户登录的状态
      //然后跳转到index页面
      sessionStorage.login = true;
      this.$router.push({
        path: "/",
        query: {
          username: this.user.account,
        },
      });
    },
	handleregister(){
		this.$router.push("/handleLogin")
	}
  },
};


</script>

<style scoped >


.login-page {
  height: 735px;

     background-image: url(../assets/maomao.jpg);
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: 0px -50px;
  display: flex;
  /* 
			align-items默认是垂直方向的对其方式
			如果弹性盒子的默认轴变了它也会改变
		*/
  align-items: center;
  /* 
			justify-content默认是水平方向的对其方式
		*/
  justify-content: center;
}
.login-form {
  background-color: #fff;
  width: 400px;
  border: 1px solid #ddd;
  border-radius: 7px;
  box-shadow: 0px 2px 15px 1px #ddd;
  padding: 15px 35px;
  margin-top: 150px;
  margin-bottom: 247px;
}
.login-form .login-form-item {
  padding: 10px 0px;
}
.login-form .login-form-item:nth-child(3) {
  /* 
		nth-child是找这个元素的父亲的第n个孩子
		并不是找第n个这个个元素
		*/
  text-align: center;
}
</style>
